<template>
	<div id="login">
		<div class="top">
			<img src="../js/img/prev.png" alt="" @click="fanhui" />
			<p class="mima">密码登录</p>
		</div>
		<form action="">
			<div><input type="text" placeholder="账号" v-model="username" /></div>
			<div class="two_inp">
				<input type="password" placeholder="密码" v-model="password" />
			</div>
			<div class="yzm">
				<input type="text" placeholder="验证码" v-model="captcha_code" />
				<div class="right">
					<a href="#" @click="yanzheng">
						<img :src="datas" alt="" class="test" />
					</a>
				</div>
			</div>
		</form>
		<p class="font">
			温馨提示：未注册的账号，登陆时将自动注册，注册过的用户可凭借账户密码登录
		</p>
		<button @click="login_btn">登录</button>
		<div class="bj" v-show="isstatic">
			<div class="pop_up">
				<img src="../js/img/gantanhao.png" alt="" />
				<p>{{ test }}</p>
				<p class="sure" @click="sure">确认</p>
			</div>
		</div>

		<a href="#" class="chong" @click="reset_mi">重置密码？</a>
	</div>
</template>

<script>
	import axios from "axios";
	axios.defaults.withCredentials = true;
	export default {
		name: "login",
		data: function() {
			return {
				datas: "",
				username: "",
				password: "",
				captcha_code: "",
				yan: "",
				isstatic: false,
				test: "",
				user: []
			};
		},
		created() {
			this.yanzheng();
		},
		methods: {
			fanhui() {
				this.$router.go(-1);
			},
			yanzheng: function() {
				let obj = this;
				this.$axios({
						url: "https://elm.cangdu.org/v1/captchas",
						method: "post"
					})
					.then(function(res) {
						obj.datas = res.data.code;
					})
					.catch(function(err) {
						window.console.log(err);
					});
			},
			sure: function() {
				this.isstatic = false;
			},
			login_btn: function() {
				axios.interceptors.request.use(
					config => {
						// 在发送请求之前做些什么，例如加入token
						config.headers.Cookie = "cap=" + this.captcha_code;
						return config;
					},
					function(error) {
						// 对请求错误做些什么
						return Promise.reject(error);
					}
				);
				let obj1 = this;
				this.$axios({
						url: "https://elm.cangdu.org/v2/login",
						method: "post",
						data: {
							captcha_code: this.captcha_code,
							password: this.password,
							username: this.username
						}
					})
					.then(function(res) {
						window.console.log(res.data)
						if (res.data.username) {
							let user = {
								name: obj1.username,
								pwd: obj1.password
							};
							// $store是挂载在vue实例上的，可通过this直接访问
							obj1.$store.commit("changUser", user);
							//Vuex提供了commit方法来修改状态
							window.console.log(obj1.$store.state);
							
							if (obj1.$router.go(-1) == "my") {
								window.console.log(res.data.username);
								obj1.$router.push('my');
							}
							obj1.$router.push('/');
							obj1.$root.loginDatas = 1;
							// window.console.log(obj1.$root.loginDatas);
							obj1.$root.$emit("logindata", res.data);
						} else if (res.data.message == "用户名参数错误") {
							obj1.isstatic = true;
							obj1.test = "请输入用户名/密码";
						} else if (res.data.message == "密码参数错误") {
							obj1.isstatic = true;
							obj1.test = "请输入密码";
						} else if (res.data.message == "验证码参数错误") {
							obj1.isstatic = true;
							obj1.test = "请输入验证码";
						} else if (res.data.message == "验证码不正确") {
							obj1.isstatic = true;
							obj1.test = "验证码错误";
						} else if (res.data.message == "密码错误") {
							obj1.isstatic = true;
							obj1.test = "密码错误";
						}
					})
					.catch(function(err) {
						window.console.log(err);
					});
			},
			reset_mi: function() {
				this.$router.push("/update");
			}
		}
	};
</script>

<style scoped="scoped">
	* {
		padding: 0;
		margin: 0;
	}

	#login {
		width: 320px;
		height: 568px;
		background-color: #f5f5f5;
	}

	.top {
		background: #3190e8;
		color: white;
		font-size: 16px;
		height: 44px;
		text-align: center;
	}

	.mima {
		display: inline-block;
		text-align: center;
		line-height: 44px;
	}

	form {
		margin: 20px 0;
	}

	input {
		width: 320px;
		height: 42px;
		line-height: 42px;
		text-indent: 1rem;
		background: white;
		outline: none;
		border: none;
		font-size: 16px;
	}

	.two_inp input {
		border-bottom: 1px solid rgba(0, 0, 0, 0.2);
		border-top: 1px solid rgba(0, 0, 0, 0.2);
	}

	.font {
		color: red;
		padding: 0 20px;
		font-size: 15px;
		padding: 12px;
	}

	button {
		width: 300px;
		height: 39px;
		background-color: #4cd964;
		font-size: 14px;
		margin-left: 5px;
		color: white;
		outline: 0;
		border: none;
		border-radius: 5px;
	}

	.right {
		float: right;
		display: inline-block;
		font-size: 14px;
		margin-top: -10px;
	}

	.right a {
		display: block;
	}

	.bj {
		width: 320px;
		height: 568px;
		background-color: rgba(0, 0, 0, 0);
		/* background-color: #000000; */
		position: fixed;
		top: 0;
		left: 0;
	}

	.pop_up {
		width: 240px;
		height: 158px;
		background: white;
		border-radius: 10px;
		top: 200px;
		left: 40px;
		position: fixed;
		text-align: center;
	}

	.pop_up img {
		height: 60px;
		width: 60px;
		margin-top: 20px;
		/* padding-top: 40px; */
	}

	.sure {
		width: 240px;
		height: 36px;
		line-height: 36px;
		color: white;
		background-color: #4cd964;
		border-radius: 5px;
		margin-top: 35px;
		font-size: 20px;
	}

	.test {
		display: inline-block;
		position: fixed;
		right: 10px;
		padding: 20px 20px;
	}

	a {
		text-decoration: none;
	}

	.chong {
		display: block;
		float: right;
		color: #3190e9;
		font-size: 12px;
		margin-right: 10px;
		margin-top: 10px;
	}

	.top img {
		width: 20px;
		height: 25px;
		position: absolute;
		left: 15px;
		top: 10px;
	}
</style>
